<template>
  <div class="notice-scroll hide-scrollbar" :style="{width, height}">
    <div ref="oNoticeList" class="notice-list">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
  defineProps({
    width: { type: String, default: '100%' },
    height: { type: String, default: '100%' },
  })
</script>

<style lang="scss" scoped>
.notice-scroll {
  position: relative;
  top: 0;
  left: 0;
  overflow: hidden;
  

  .notice-list {
    height: auto;
    animation: 10s wordsLoop linear infinite normal;

    .notice-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 200px;
      height: 50px;

      .text {
        font-family: normal;
        font-size: 14px;
        text-shadow: 0px 0px 16px #0091ff;
      }
    }
  }
}

@keyframes wordsLoop {
    0% {
      transform: translateY(0%);
      -webkit-transform: translateY(0%);
    }

    10% {
      transform: translateY(0%);
      -webkit-transform: translateY(0%);
    }

    90% {
      transform: translateY(calc(-100% + 120px));
      -webkit-transform: translateY(calc(-100% + 120px));
    }

    100% {
      transform: translateY(calc(-100% + 120px));
      -webkit-transform: translateY(calc(-100% + 120px));
    }
  }

  // @-webkit-keyframes wordsLoop {
  //   0% {
  //     transform: translateY(100%);
  //     -webkit-transform: translateY(100%);
  //   }

  //   100% {
  //     transform: translateY(-100%);
  //     -webkit-transform: translateY(-100%);
  //   }
  // }
</style>